<template>
<div class="main_box"  style="padding:10px">
  <div class="add_wrap">
    <div class="tit">
      <h2>基础信息</h2>
      <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList"> 返 回</el-button>
    </div>
    <el-form :model="addForm" ref="addForm" label-width="200px" :rules="roleRules">
      <el-row>
        <el-form-item label="角色类型：" prop="roleType">
          <el-select v-model="addForm.roleType" placeholder="请选择角色类型" :clearable="true">
            <el-option label="系统" :value="1"></el-option>
            <el-option label="H5" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item  label="角色名：" prop="roleName">
          <el-input v-model="addForm.roleName" @keydown.native="keydown($event)" :clearable="true"></el-input>
        </el-form-item>
        <el-form-item  label="角色描述：" prop="descriptions">
          <el-input type="textarea" @keydown.native="keydown($event)" v-model="addForm.descriptions" :clearable="true"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item>
          <el-button type="primary" plain @click="sureClick">保 存</el-button>
          <el-button @click="returnList">取 消</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
 </div>
</template>
<script>
import * as message from "@/constants/message";
import AuthApi from "@/api/system/auth";
export default{
  data(){
      return {
        addForm:{
          roleId: "",
          roleName: "",
          sortby: "",
          descriptions: ""
        },
        roleRules: {
          // roleType: [
          //   { required: true, message: "请选择角色类型", trigger: "blur" },
          // ],
          roleName:[
            { required: true, message: "请输入角色名", trigger: "blur" },
          ],
          descriptions:[
            { required: true, message: "请输入角色描述", trigger: "blur" },
          ]
        }
      }
  },
  mounted() {
    this.init();
  },
  methods: {
    init () {
      if (this.$route.query.id) {
        this.getData()
      }
    },
    keydown(e) {
      if(e.keyCode== 32){
        e.returnValue=false;
      }
    },
    getData(){
      AuthApi.getRoleInfo({roleId:this.$route.query.id})
        .then(res => {
          console.table(res.data)
          this.$Utils.bindingBean(this.addForm, res.data);
          this.addForm.roleType = parseInt(res.data.roleType);
        })
    },
    sureClick() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.$confirm(message.MSG_CONFIRM_SAVE, message.TITLE_PROMPT, {})
            .then(() => {
              if (this.addForm.roleId){
                this.editRole()
              }else{
                this.addRole()
              }
          });
        }
      })
    },
    addRole() {
      let data = {
          roleType:this.addForm.roleType,
          roleName: this.addForm.roleName,
          descriptions: this.addForm.descriptions
      };
      AuthApi.addRole(data)
        .then(data => {
          this.$notify.success({
            title: message.TITLE_SUCCESS,
            message: message.MSG_ACTION_SUCCESS
          });
        this.returnList()
      })
    },
    editRole() {
      let data = {
        roleType:this.addForm.roleType,
        roleName: this.addForm.roleName,
        descriptions: this.addForm.descriptions,
        roleId: this.addForm.roleId
      };
      AuthApi.editRole(data)
        .then(res => {
          this.$notify.success({
            title: message.TITLE_SUCCESS,
            message: message.MSG_ACTION_SUCCESS
          });
          this.returnList(data)
        })
    },
    returnList(){
      this.$store.dispatch('delView', this.$route);
      this.$router.push({path: '/sys/roleManagement'})
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
